<template>
  <div class="handle">
    <div class="title">
      <van-icon name="arrow-left" color="#ffffff" @click="skip_bedroom"/>
      <van-col>卧室储物</van-col>
      <van-icon name="bars" color="#ffffff" />
    </div>

    <van-tabs class="navigation1">
      <van-tab title="销售优先" name="a">
        <div class="commodity" v-for="(item, index) in list" :key="index">
          <van-image :src="item.showImg" :radius="5"/>
          <ul>
            <li>{{item.name}}</li>
            <li>{{item.describe}}</li>
            <li>￥{{item.price}}</li>
          </ul>
        </div>
      </van-tab>

      <van-tab title="价格高低" name="b">内容 2</van-tab>
      <van-tab title="综合排序" name="c">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getStorage } from '../../../api/index';
export default {
  data() {
    return {
      list: [],
    };
  },
  created(){
    this.init()
  },
  methods:{
    async init(){
      let {data,meta:{msg,status}} = await getStorage({tags: 'room'});
      console.log(data);
      this.list = data
    },
    skip_bedroom(){
      this.$router.push('/bedroom')
    }
  }
};
</script>

<style lang="less" scoped>
.handle {
  width: 100%;
  background-color: #efefef;

  .title {
    height: 54px;
    background-color: #ff5555;
    padding: 0;
    padding-top: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .van-icon {
      padding: 10px 20px 0 16px;
      font-size: 42px;
    }
    .van-col {
      font-size: 18px;
      color: #ffffff;
      font-size: 34px;
      line-height: 54px;
    }
  }

  .navigation1 {
    height: 1246px;
    /deep/.van-tab {
      color: rgba(0, 0, 0, 0.8);
    }
    /deep/ .van-tab--active {
      color: #ff5555;
    }
    /deep/ .van-tabs__line {
      background-color: #ffffff;
    }

    /deep/.van-tabs__content {
      margin: 0 15px;
      margin-top: 10px;
      .van-tab__pane {
        display: flex;
        flex-wrap: wrap;
        .commodity {
          width: 350px;
          background-color: #ffffff;
          margin: 5px;
          padding-bottom: 30px;
          border-radius: 10px;
          display: flex;
          flex-wrap: wrap;
          .van-image {
            width: 350px;
            height: 290px;
          }
          ul {
            width: 350px;
            padding: 0 20px;
            box-sizing: border-box;
            li:nth-child(1) {
              font-size: 20px;
              color: rgba(0, 0, 0, 0.8);
              margin-top: 10px;
            }
            li:nth-child(2){
              font-size: 15px;
              color: rgba(0, 0, 0, 0.5);
            }
            li:nth-child(3) {
              font-size: 15px;
              color: #ff5555;
            }
          }
        }
      }
    }
  }
}
</style>